_hottouse.GIF (2162 bytes)

The first interactive objects we'll look at are buttons, since they're the simplest.

The first thing you must know is how to make a button. They look like this:

<input TYPE="button" VALUE="Button Text" NAME="Name">

Which produces this:

Now, the above button does nothing. Go ahead; click on it! Buttons that do nothing are cute and all, but how do we make buttons that actually serve some purpose? With JavaScript!

JavaScript has a whole class of commands called Event Handlers. An Event is anything that happens, like clicking on a button.

The Event Handler we're going to use with buttons is called onClick(). onClick() will do whatever we tell it to, every time a button is clicked.

Let's look at an example:

</font></p> <form> <p><font face="MS Sans Serif"><input TYPE="button" VALUE="Example" onClick="alert('You\'re good at pressing my buttons!');"> </font></p> </form>

First thing to notice is that the button is contained in a form. Buttons can only exist within forms.
Next, let's look more closely at the onClick Handler. Whatever is enclosed in the quotes will be executed every time the button gets clicked. So, in this case,

alert(&quot;You\'re good at pressing my buttons!&quot;); is being executed. The alert function is built into JavaScript. It brings up a small window that says whatever is between the quotes. Notice that the text is "You\'re good at pressing my buttons!" Why did I use You\'re? Because ' is a special character in JavaScript. The \ tells the browser that following character should be interpreted literally.
Also, notice that when I called alert by itself, I used double quotes, but when I called it from within the onClick Handler, I used single quotes. The reason is that the onClick Handler expects the whole thing to be enclosed in double quotes. If the alert function also used double quotes, then it would pair them up in order of appearance. In other words, the onClick Handler would have "alert(" as it's argument.

O.K. Now that we have some background with buttons, let's explore a little more of what they can do.

Since the onClick Handler can call any function, it is very powerful. Look at this example:

</font></p> <form> <p><font face="MS Sans Serif"><input TYPE="Button" VALUE="Back up" onClick="history.go(-1);"> </font></p> </form>

The history.go method (history is an object, go is a method of history.) acts just like the Back and Forward buttons or your browser. If the number in parenthesis is positive, it goes Forward; negative goes Back. The value of number in parenthesis is the number of times to click the button. So, history.go(-1) goes back one page. history.go(3) goes forward three pages.

Here's a button which calls a homemade function.

<script LANGUAGE="JavaScript"> function count_down() { var count=3; for (count=3; count>=1; count--) { alert(count); } alert("Contact!"); } </script> </font></p> <form> <p><font face="MS Sans Serif"><input TYPE="Button" VALUE="Count!" onClick="count_down();"> </font></p> </form>

There are several new things in this example.
function is the way you define your own functions. In this case, my function is called count_down(). The parenthesis, by the way, are there for passing parameters, which we'll see in a moment.
Notice, I called alert with count instead of a string. That works because, when the browser interprets count the first time, it sees a "3". That "3" can be a number or a string. So, since alert wants a string, the browser gives it "3" as a string. The same thing happens for "2" and "1".
The for loop is also new. A for loop executes its contents some predefined number of times. This one starts at 3 and counts down to 1. The first part is where it starts. The second is the condition for it to continue. And the third is how count is incremented. The "count--" means "count = count - 1." Similarly, "count++" means "count = count + 1."
And, finally, note that the function declaration comes before the function call, i.e. I define it before I use it. That's very important. Most function definitions are placed in the header, because the header is sure to execute before any other part of the page.

<script LANGUAGE="JavaScript"> function greetings (gender) { if (gender == "male") { alert("Good morrow, M'Lord!") } else { alert("'Tis a pleasure to meet you, M'Lady.") } } </script> </font></p> <form> <p><font face="MS Sans Serif"><input TYPE="button" VALUE="Male" onClick="greetings('male');"> <input TYPE="button" VALUE="Female" onClick="greetings('female');"> </font></p> </form>

This last example demonstrates parameter passing. greetings() is passed a value which depending upon what button you press. It either passes "male" or "female".
When I defined greetings(), I put the variable, gender, within the parenthesis. That means that whatever value is passed to greetings() will be stored in gender.

There are many more things that can be done with buttons. Unfortunately, A lot of the cooler things involve using forms or links, which we haven't covered yet.